<template>
  <div class="login-container">
    <el-form ref="form" :rules="rules" :model="form" label-width="80px" class="login-form">
      <h2 class="login-title">手机销售管理系统</h2>
      <el-form-item label="用户名" prop="username" class="username">
        <el-input v-model="form.username" class="usernameAndPasswordInputbox"></el-input>
      </el-form-item>
      <el-form-item label="密   码" prop="password" class="password">
        <el-input v-model="form.password" type="password" class="usernameAndPasswordInputbox"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('form')">登录</el-button>
        <el-button class="resetButton" @click="resetForm('form')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import {login,getUserInfo} from '@/api/login'
  export default {
    data() {
      return {
        form: {
          username:'',
          password:''
        },
        rules:{
          username:[
            {required:true,message:'        请输入用户名        ',trigger:'blur'},
            {min:1,max:15,message:'长度在1-15个字符之间',trigger:'blur'}
          ],
          password:[
            {required:true,message:'        请输入密码        ',trigger:'blur'},
            {min:1,max:14,message:'长度在1-14个字符之间',trigger:'blur'}
          ],
        }
      }
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          console.log(valid)
          if (valid) {
            // 把表单提交给后台，验证数据是否正确
            console.log('submit!');
            // alert('submit!');
            this.$message({
              message:'登录成功！',
              type:'success',
              center:true
            });
            const promise = this.$store.dispatch('Login',this.form).then(response => {
              console.log('response.flag',response.flag)
              // “response”就是响应回来的那个真实对象↑
              if (response.flag) {
                // 前往首页（可以不用在此处获取用户信息而直接前往首页，因为在后面做“权限校验”时会获取用户信息）↓
                this.$router.push('/')
              }
              else{
                this.$message({
                  message:response.message,
                  type:'warning',
                  center:true
                })
              }
            }).catch(error => {

            })
            console.log('pro',promise)
            
            /* login(this.form.username,this.form.password).then(response => {
              const be_responsed_data = response.data
              console.log(be_responsed_data,be_responsed_data.flag,be_responsed_data.data.token,be_responsed_data.message)
              if(be_responsed_data.flag){
                // 验证成功，通过token去获取用户信息
                getUserInfo(be_responsed_data.data.token).then(response => {
                  const be_responsed_user_data = response.data
                  if (be_responsed_user_data.flag) {
                    // 获取到了用户的数据
                    console.log('userinfo',be_responsed_user_data.data)
                    // 1.保存token和用户信息
                    localStorage.setItem('cellphone-sms-user',JSON.stringify(be_responsed_user_data.data))
                    localStorage.setItem('cellphone-sms-token',be_responsed_data.data.token)
                    // 2.前往首页
                    this.$router.push('/')
                  }
                  else{
                    this.$message({
                      message:be_responsed_user_data.message,
                      type:'warning',
                      center:true
                    });
                  }

                })
              }
              else{
                // 验证失败（验证未通过），弹出警告
                // alert(be_responsed_data.message)
                this.$message({
                  message:be_responsed_data.message,
                  type:'warning',
                  center:true
                });
              }
            }) */
            
          }
          else {
            console.log('验证失败');
            return false;
          }
        });
      },
      resetForm(formName){
        this.$refs[formName].resetFields() // ←此项表示“重置表单内填入的数据”。并且重置要看“el-form-item”这个组件元素的“prop”属性上是否指定了字段名，只有指定了字段名，重置才会生效。
      }
    }
  }
</script>

<style lang="scss" scoped>
.login-form {
  /* 表单的样式设置：宽度为350像素，上下间距为160像素，左右自动居中，背景色为采用hsla函数，以色相为0，饱和度为0%，亮度为100%，透明度为0.8定义的颜色，内边距为28像素，边框采用圆角，长度为20像素 */
  width: 350px;
  margin: 160px auto;
  background-color: hsla(0, 0%, 100%, 0.8); /*即rgb(255,255,255,0.8)*/
  padding: 28px;
  border-radius: 20px;
}
.login-container {
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: 100%;
  background: url("../../assets/login.jpg");
  overflow: hidden;
}
h2 {
  display: block;
  font-size: 1.5em;
  margin-block-start: 0.83em;
  margin-block-end: 0.83em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: bold;
}
.login-title {
  text-align: center;
}
.usernameAndPasswordInputbox{
  margin: 0px 0px;
  border: 1px;
  padding: 0px;
  width: 192px;
}
.resetButton{
  margin-left: 50px;
}
.password{
  white-space: pre;/* ←此项表示文本中的空格、回车、制表符等所有东西都照原样输出，不合并空格且文本不换行 */
}
.username{
  white-space: pre;
}
div{
  ::v-deep.el-form-item__error{
    white-space: pre;
    top: 28px;
  }
}
div{::v-deep.el-input__inner{text-align: center;}}
</style>